<template>
    <div>
        <el-container style="height: 900px; border: 1px solid #eee">
            <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">
                <div class="header-left">
                    <span>书缘校园-校园二手书交流系统</span>
                </div>
                <div class="header-right">
                    <router-link to="/mySetting">
                        <el-avatar
                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                    </router-link>
                </div>
            </el-header>
            <el-container>
                <aside-layout></aside-layout>
                <el-main>
                    <div class="chat-window">
                        <!-- 添加标题 -->
                        <h2 style="text-align: center; color: #333; margin-bottom: 20px;">AI大模型</h2>
                        <div class="chat-messages">
                            <div v-for="(message, index) in messages" :key="index" :class="['message', message.sender]">
                                <div class="message-content">{{ message.content }}</div>
                            </div>
                        </div>
                        <div class="chat-input">
                            <el-input v-model="inputMessage" placeholder="请输入消息"
                                @keyup.enter.native="sendMessage"></el-input>
                            <el-button type="primary" @click="sendMessage">发送</el-button>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios';
import AsideLayout from '../../layout/AsideLayout.vue';

export default {
    components: { AsideLayout },
    data() {
        return {
            inputMessage: '',
            messages: []
        };
    },
    methods: {
        async sendMessage() {
            if (!this.inputMessage.trim()) return;

            // 添加用户消息到聊天窗口
            this.messages.push({ sender: 'user', content: this.inputMessage });

            try {
                // 发送消息到后端服务器
                const response = await axios.post('http://localhost:3000/api/ai/message', { message: this.inputMessage });

                // 添加AI的回答到聊天窗口
                this.messages.push({ sender: 'ai', content: response.data.message });
            } catch (error) {
                console.error('Error sending message:', error);
            }

            // 清空输入框
            this.inputMessage = '';
        }
    }
};
</script>

<style>
.el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
  font-weight: bold;
}

.chat-window {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.message {
    margin-bottom: 10px;
}

.message.user {
    text-align: right;
}

.message.ai {
    text-align: left;
}

.message-content {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 8px;
    background-color: #f1f1f1;
    max-width: 70%;
}

.message.user .message-content {
    background-color: #409EFF;
    color: #fff;
}

.chat-input {
    display: flex;
    padding: 10px;
}

.chat-input .el-input {
    flex: 1;
    margin-right: 10px;
}
</style>